<template>
  <div class="home-recommend">
    <h1>推荐歌单</h1>
    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li v-for="(item, index) in listData" :key="index" @click="selectItem(item)">
          <div class="cover">
            <van-image :src="item.cover" radius="10" />
            <span>{{ item.listen_num | numFilter(1) }}万</span>
          </div>
          <span>{{ item.title }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { betterScrollHorizontal } from '@/common/betterScroll.js'
export default {
  data() {
    return {
      listData: []
    }
  },
  mounted() {
    this.getSongListData()
  },
  methods: {
    // 获取推荐歌单数据
    getSongListData() {
      this.$request('get', '/recommend/playlist/u').then(res => {
        // console.log(res);
        if (res.result == 100) {
          this.listData = res.data.list
        }
        //函数调用
        betterScrollHorizontal(this, this.$refs.content, this.$refs.wrapper, this.listData.length, 10)
      })
    },
    // 列表项的单击事件
    selectItem(item) {
      const contentId = item.content_id
      // console.log("歌单id:" + contentId);

      //1.编程式导航，字符串路径的方式
      this.$router.push(`/songlist/${contentId}`)
      //2.编程式导航，带有路径的对象方式
      // this.$router.push({path: `/songlist/${contentId}`})
      //3.编程式导航，命名的路由，并带上参数，让路由建立 url
      // this.$router.push({
      //   name: 'songlist',
      //   params: {
      //     id: contentId
      //   }
      // })
    }
  },
  //局部过滤器
  // filters: {
  //   //处理播放量的显示格式（万和小数点）
  //   numFilter(value,num) {
  //     return parseFloat(value / 10000).toFixed(num)
  //   }
  // }
}
</script>

<style scoped>
/* .home-recommend ul {
  display: flex;
  flex-wrap: wrap;
}

.home-recommend ul>li {
  width: calc((100% - 1rem) / 3 * 1);
}

.home-recommend ul>li:nth-of-type(3n+2) {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.cover {
  position: relative;
}

.cover>span {
  position: absolute;
  right: 0;
  bottom: 0.3rem;
  background-color: red;
} */

.wrapper {
  width: 100%;
  overflow: hidden;
}

/* ul.content {
  width: calc(12 * 10rem);
} */

ul.content li {
  width: 10rem;
  display: inline-block;
  vertical-align: top;
  /*垂直对齐方式：顶部对齐*/
}

ul.content li * {
  margin: 0 0.1rem;
}

ul.content li>span {
  font-size: 0.8rem;
  color: red;
}

.cover {
  position: relative;
}

.cover>span {
  position: absolute;
  right: 0;
  bottom: 0.3rem;
  background-color: #a6a0a0;
  color: white;
  border-radius: 1rem;
  width: 5rem;
}
</style>